<template>
  <div>Count: {{ getCount }}</div>
  <div>Count: {{ count }}</div>
  <button @click="demo.addCount">点击</button>

  <br>
  <button @click="demo.changeName">改变名字</button>
  <div>Name: {{ demo.getName }}</div>
  <!-- <div>Count: {{ count }}</div>
  <button @click="addCount">点击</button> -->
</template>
  
<script setup>
  import { useDemoStore } from "@/store";
  import { storeToRefs } from "pinia";

  const demo = useDemoStore();

  // const { count, getCount } = demo;
  // 使结构出来得属性保持响应式
  const { count, getCount } = storeToRefs(demo);
  // action可以直接解构
  const { addCount } = demo;
</script>